<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>RADYO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
html, body {
    margin: 0;
    padding: 0;
    background: #161616;
}
#container {
    position: relative;
    width: 1466px;
    margin: 0 auto;
}
#bg-image img {
    width: 1466px;
    display: block;
}
.radio-player {
    position: absolute;
    left: 126px;
    top: 1111px;
    width: 1166px;
    height: 38px;
    background: linear-gradient(#3a3a3a, #1e1e1e);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),
                0 3px 6px rgba(0,0,0,.6);

    font-family: Arial, sans-serif;
}
.play-btn {
    width: 28px;
    height: 22px;
    background: #2b2b2b;
    border: 1px solid #000;
    border-radius: 2px;
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.play-btn:active {
    background:#1c1c1c;
}
.play-btn span {
    width: 0;
    height: 0;
    border-left: 9px solid #eaeaea;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.playing span {
    border:none;
    width:10px;
    height:10px;
    background:#eaeaea;
    box-shadow: 6px 0 0 #eaeaea;
}
.progress {
    flex:1;
    height: 6px;
    background:#111;
    margin:0 10px;
    border-radius:3px;
    overflow:hidden;
}
.progress-fill {
    width:0%;
    height:100%;
    background: linear-gradient(to right,#5cb85c,#8fd18f);
}
.volume {
    position: relative;
    width: 90px;
    height: 6px;
    background: #111;
    border-radius: 3px;
    cursor: pointer;
}
.volume-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #aaa;
    border-radius: 3px;
}
.volume-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #eaeaea;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.song-marquee {
    flex: 1;
    height: 22px;
    margin: 0 10px;
    background: #111;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.song-text {
    display: inline-block;
    white-space: nowrap;
    font-size: 13px;
    color: #eaeaea;
    line-height: 22px;
    padding-left: 100%;
    animation: scrollText 15s linear infinite;
}
@keyframes scrollText {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
#chat {
    position: absolute;
    left: 136px;
    top: 1276px;
    width: 1200px;
    height: 700px;
    background-size: cover;
    background-position: center;
}
    #ledSongCanvas{
    position: absolute;
    top: 966px;
    left: 6px;
    width:1460px;
    height:50px;
    z-index: 9999;
    pointer-events: none;
}
#button-area {
  position: absolute;
  top: 1986px;
  left: 330px;
  z-index: 666;
}
.button-row {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  margin-top: 15px; 
}
.button-row.top {
  justify-content: space-between;
  width: 466px;
}
.button-row.bottom {
  justify-content: space-between;
  margin-left: 200px;
  width: 466px;
}
.button-row > a:not(.game-menu > a) {
  position: relative;
  padding: 8px 16px;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 12px;
  background: rgba(0,0,0,0.55) !important;
  overflow: hidden;
  display: inline-block;
  z-index: 1;
  transition: transform 0.2s;
}
.button-row > a:not(.game-menu > a)::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(
    270deg,
    #00e5ff,
    #00b0ff,
    #2979ff,
    #3f51b5,
    #00c8ff,
    #1a237e
  );
  background-size: 400% 400%;
  animation: moveGradient 6s linear infinite;
  z-index: -1;
}
.button-row > a:not(.game-menu > a)::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  z-index: -1;
}
.button-row > a:not(.game-menu > a):hover {
  transform: scale(1.08);
}
.game-menu > a {
  position: relative;
  padding: 8px 16px;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  overflow: hidden;
  display: inline-block;
  z-index: 1;
  transition: transform 0.2s;
}
.game-menu > a::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(
    270deg,
    #00e5ff,
    #00b0ff,
    #2979ff,
    #3f51b5,
    #00c8ff,
    #1a237e
  );
  background-size: 400% 400%;
  animation: moveGradient 6s linear infinite;
  z-index: -1;
}
.game-menu > a::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  z-index: -1;
}
.game-menu > a:hover {
  transform: scale(1.08);
}
@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.game-list {
  position: absolute;
  top: 48px;
  left: 400;
  min-width: 180px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 9999;
}
.game-list a {
  position: relative;
  color: #00e5ff;
  text-shadow:
    0 0 2px #00e5ff,
    0 0 5px #00b0ff,
    0 0 10px #2979ff,
    0 0 20px #3f51b5,
    0 0 30px #00c8ff,
    0 0 40px #1a237e;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 15px;
  background: rgba(0,0,0,0.55);
  overflow: hidden;
  display: inline-block;
  z-index: 1;
  transition: transform 0.2s, background 0.3s;
}
.game-list a::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(
    270deg,
    #00e5ff,
    #00b0ff,
    #2979ff,
    #3f51b5,
    #00c8ff,
    #1a237e
  );
  background-size: 400% 400%;
  animation: moveGradient 6s linear infinite;
  z-index: -1;
}
.game-list a::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  z-index: -1;
}
.game-list a:hover {
  transform: scale(1.05);
  background: rgba(0,0,0,0.6);
}
#footer {
    text-align: center;
    font-size: 12px;
    color: #a0a0a0;
    margin: 1px auto 1px;
    position: relative; 
    z-index: 1;
}
#star-canvas {
    position: absolute;
    top: 66;
    left: 70px;
    width: 1100px;
    height: 450px;
    z-index: 9999;
    pointer-events: none;
}
  #labirent {
  left: 80px;
  width: 1306px;
  height: 300px; 
  position: absolute;
  top:2160px;
}
</style>
<div id="container">
   <canvas id="star-canvas"></canvas>
<canvas id="ledSongCanvas"></canvas>
<canvas id="labirent" width="1366" height="366"></canvas>

    <div id="bg-image">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLF8xn7Nq4fehqYm0ZZsSVO4-N6KxLINSNAyrDMVDCgiXqhI0K6a6FbT39fuFRbDQtkgNUZdAg9Nt2wJ4fuEjjePUYhbeqlzwm6PpUZ5JN08FWItpoWhEVbo3jybiVXz1VhP6Sy6NDab9W3i06jmjjSDN87YIzNTsCNqc3ctM7FnvM6SC39GpbX1UsQM/s1600/index2_.png">
    </div>

  <div class="radio-player">
    <div class="play-btn" id="playBtn"><span></span></div>
    <div class="song-marquee">
    <div class="song-text" id="songText">Yükleniyor...</div>
</div>


    <div class="volume" id="volumeBar">
    <div class="volume-fill" id="volumeFill"></div>
    <div class="volume-thumb" id="volumeThumb"></div>
</div>


    <audio id="radio" src="https://eu?.fastcast4u.com/proxy/ALLATURKAA?mp=/1"></audio>
</div>
  <div style="height: 26px;"></div>
    <div id="chat">
        <iframe src="https://chameleon.chattersnet.nl/chat/xxxx"
            width="1200" height="700"
            frameborder="0" scrolling="no"
            allow="camera;microphone"></iframe>
    </div>
<div id="button-area">

<div style="display: none;">
<a class="cc_streaminfo" data-type="song" data-username="ALLATURKAA" href="https://eu?.fastcast4u.com/tunein/ALLATURKAA.pls">Yükleniyor...</a>
<script src="https://eu?.fastcast4u.com/system/streaminfo.js"></script>
                   </div>

  <div class="button-row top">
    <a class="neon-btn" href="https://allaturkaa.de/radyo/sid.php?no=xxxx" target="_blank">Sid Gönder</a>
    <a class="neon-btn" href="https://allaturkaa.de/radyo/radyolist.php" target="_blank">Radyolar</a>
  </div>

  <div class="button-row bottom">
    <a class="neon-btn" href="#"
       onclick="window.open('https://smiley-gif.blogspot.com/','popup','width=800,height=600');return false;">
       İFADELER
    </a>
    <div class="game-menu">
      <a class="neon-btn" href="#" onclick="toggleGames(event)">OYUNLAR</a>
      <div class="game-list" id="gameList">
        <a href="https://www.rekoroyun.com/popup.php?id=4607" onclick="openGame(event,this.href)">101 Oyna</a>
        <a href="https://www.shooter-bubble.fr/jeux/bubble-shooter-sans-pub/index.html" onclick="openGame(event,this.href)">Top Patlat</a>
        <a href="https://www.google.com/logos/fnbx/solitaire/standalone.html" onclick="openGame(event,this.href)">Soliter</a>
      </div>
    </div>
  </div>
</div>
<div id="footer">© 2026</div>
<script> 
const defaultBackground = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDA5XsmEcOmkgu-9lIhbBogBroG2ouIVYVJPr2gqnpzO_F49Di644vPwpFLx1w5t4do_30qmgTOhCwDAXYWbPm5JMBT6BKPT2MZvC_EJeFJf9s6IRZUdejoA7wSnwd1zQ4BfBpjlgtY7dNu1fO1hnCbAn9yrmfPMZ_a1hJNUoD1qOZEC66KQLEaK_TJpG4/s1600/z%20gitarrrrr.jpg";
const djBackgrounds = {
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://s1.directupload',
         'YAYINCI':'https://blogger.jpg'
    // İstediğin DJ ve arka plan eşleştirmelerini ekle
};

let lastDJ = '';
function refreshStreamInfo() {
    const oldScript = document.getElementById('streaminfo-script');
    if (oldScript) oldScript.remove();
    const script = document.createElement('script');
    script.id = 'streaminfo-script';
    script.src =
        'https://eu?.fastcast4u.com/system/streaminfo.js?t=' +
        Date.now();
    script.onload = updateBackground;
    document.body.appendChild(script);
}
function updateBackground() {
    const streamInfoElement = document.querySelector('.cc_streaminfo');
    const chatContainer = document.getElementById('chat');
    if (!streamInfoElement || !chatContainer) return;
    const currentDJ = streamInfoElement.textContent.trim().toUpperCase();
    if (!currentDJ || currentDJ === lastDJ) return;
    lastDJ = currentDJ;
    let backgroundImage = defaultBackground;
    for (const key in djBackgrounds) {
        if (currentDJ.includes(key)) {
            backgroundImage = djBackgrounds[key];
            break;
        }
    }
    const img = new Image();
    img.src = backgroundImage;
    img.onload = () => {
        chatContainer.style.backgroundImage = `url('${backgroundImage}')`;
    };
}
refreshStreamInfo();
setInterval(refreshStreamInfo, 5000);
</script>

<script>
function toggleGames(e) {
    e.preventDefault();
    e.stopPropagation();
    const list = document.getElementById("gameList");
    list.style.display = (list.style.display === "flex") ? "none" : "flex";
}
function openGame(e, url) {
    e.preventDefault();
    window.open(url, "gamePopup", "width=900,height=650");
    closeGames();
}
function closeGames() {
    const list = document.getElementById("gameList");
    if (list) list.style.display = "none";
}
document.addEventListener('click', function(e) {
    const gameMenu = document.querySelector('.game-menu');
    if (!gameMenu.contains(e.target)) {
        closeGames();
    }
});
const starCanvas = document.getElementById('star-canvas');
const starCtx = starCanvas.getContext('2d');
const container = document.getElementById('container');
starCanvas.width = container.clientWidth;
starCanvas.height = 450;
class Star {
    constructor() { this.reset(); }
    reset() {
        this.x = Math.random() * starCanvas.width;
        this.y = Math.random() * starCanvas.height;
        this.size = Math.random() * 11 + 1;
        this.opacity = Math.random() * 0.3 + 0.3;
        this.maxOpacity = Math.random() * 0.7 + 0.3;
        this.twinkleSpeed = Math.random() * 0.02 + 0.005;
        this.rotation = Math.random() * Math.PI * 2;
        this.rotationSpeed = (Math.random() * 0.02 + 0.005) * (Math.random() > 0.5 ? 1 : -1);
        this.state = 'appearing';
        this.colorBase = `rgba(255,255,200,`;
    }
    draw() {
        starCtx.save();
        starCtx.translate(this.x, this.y);
        starCtx.rotate(this.rotation);
        starCtx.beginPath();

        for (let i = 0; i < 5; i++) {
            starCtx.lineTo(0, -this.size);
            starCtx.rotate(Math.PI / 5);
            starCtx.lineTo(0, -this.size / 5);
            starCtx.rotate(Math.PI / 5);
        }
        starCtx.closePath();
        const starColor = this.colorBase + this.opacity + ")";
        starCtx.fillStyle = starColor;
        starCtx.shadowColor = starColor;
        starCtx.shadowBlur = 8;
        starCtx.fill();
        starCtx.restore();
    }
    update() {
        this.rotation += this.rotationSpeed;
        if (this.state === 'appearing') {
            this.opacity += this.twinkleSpeed;
            if (this.opacity >= this.maxOpacity) this.state = 'disappearing';
        } else {
            this.opacity -= this.twinkleSpeed;
            if (this.opacity <= 0) this.reset();
        }
    }
}
atob("RElMQkVSIFlJTE1BWg==");
const stars = [];
for (let i = 0; i < 4; i++) stars.push(new Star());
function animateStars() {
    starCtx.clearRect(0, 0, starCanvas.width, starCanvas.height);
    stars.forEach(s => { s.update(); s.draw(); });
    requestAnimationFrame(animateStars);
}
animateStars();
const _0x9fa3 = "NjZESUxCRVIgWA==";
const ledCanvas = document.getElementById('ledSongCanvas');
const ledCtx = ledCanvas.getContext('2d');
ledCanvas.width = document.getElementById('ledSongCanvas').offsetWidth;
ledCanvas.height = 50;
const djNames = [
     "                                                                          KURUCU: xxxxx * ADMIN: xxxxxx * Djlerimiz: DJ xxx * DJ xxxxx * DJ xxxxx * DJ xxxxx * DJ xxxxx * DJ xxxxx * DJ xxxx"
];
let currentIndex = 0;
let xOffset = 0;
const ledRadius = 1;
const ledSpacing = 4;
function hsvToRgb(h,s,v){
    let c=v*s, x=c*(1-Math.abs((h/60)%2-1)), m=v-c, r=0,g=0,b=0;
    if(h<60){r=c;g=x;} else if(h<120){r=x;g=c;} else if(h<180){g=c;b=x;}
    else if(h<240){g=x;b=c;} else if(h<300){r=x;b=c;} else {r=c;b=x;}
    return `rgb(${(r+m)*255|0},${(g+m)*255|0},${(b+m)*255|0})`;
}
let textWidth = 0;
function drawLedText(){
    ledCtx.clearRect(0,0,ledCanvas.width,ledCanvas.height);
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = textWidth + ledCanvas.width; 
    tempCanvas.height = ledCanvas.height;
    const tCtx = tempCanvas.getContext('2d');
    tCtx.font = "38px Arial";
    tCtx.fillStyle = "#fff";
    tCtx.textBaseline = "middle";
    const activeText = djNames[currentIndex];
    tCtx.fillText(activeText, 0, tempCanvas.height / 2);
    textWidth = tCtx.measureText(activeText).width;
    const imageData = tCtx.getImageData(0,0,tempCanvas.width,tempCanvas.height).data;
    for(let y=0; y<ledCanvas.height; y+=ledSpacing){
        for(let x=0; x<ledCanvas.width; x+=ledSpacing){
            const px = xOffset + x;
            if(px >= tempCanvas.width) continue;
            const i = (y*tempCanvas.width + px)*4;
            if(imageData[i+3] > 128){
                const hue = ((x/ledCanvas.width)*720)%360;
                ledCtx.fillStyle = hsvToRgb(hue,1,1);
                ledCtx.beginPath();
                ledCtx.arc(x,y,ledRadius,0,Math.PI*2);
                ledCtx.fill();
            }
        }
    }
    xOffset += 2;
    if(xOffset > textWidth + 20){
        xOffset = 0;
        currentIndex = (currentIndex + 1) % djNames.length;
    }
    requestAnimationFrame(drawLedText);
}
drawLedText();
function updateSongTitle() {
    const info = document.querySelector('.cc_streaminfo');
    const songText = document.getElementById('songText');
    if (!info || !songText) return;

    const text = info.textContent.trim();
    if (text && songText.textContent !== text) {
        songText.textContent = text;
        songText.style.animation = 'none';
        songText.offsetHeight; // reset
        songText.style.animation = null;
    }
}
setInterval(updateSongTitle, 2000);
const radio = document.getElementById("radio");
const btn = document.getElementById("playBtn");
const volumeBar = document.getElementById("volumeBar");
const volumeFill = document.getElementById("volumeFill");
btn.onclick = () => {
    if(radio.paused){
        const currentSrc = radio.src;
        radio.src = '';
        radio.load();
        radio.src = currentSrc; 
        radio.play();
        btn.classList.add("playing");
    } else {
        radio.pause();
        btn.classList.remove("playing");
    }
};
const volumeThumb = document.getElementById('volumeThumb');
let isDragging = false;
volumeThumb.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', e => {
    if(!isDragging) return;
    const rect = volumeBar.getBoundingClientRect();
    let percent = (e.clientX - rect.left) / rect.width;
    percent = Math.max(0, Math.min(1, percent));
    radio.volume = percent;
    volumeFill.style.width = (percent*100) + "%";
    volumeThumb.style.left = (percent*100) + "%";
});
volumeBar.addEventListener('click', e => {
    const rect = volumeBar.getBoundingClientRect();
    let percent = (e.clientX - rect.left) / rect.width;
    percent = Math.max(0, Math.min(1, percent));
    radio.volume = percent;
    volumeFill.style.width = (percent*100) + "%";
    volumeThumb.style.left = (percent*100) + "%";
});
const canvas = document.getElementById("labirent");
const ctx = canvas.getContext("2d");
const TILE = 20;
const COLS = Math.floor(canvas.width / TILE);
const ROWS = Math.floor(canvas.height / TILE);
canvas.style.background = "#111";
function generateMaze() {
    const maze = Array.from({ length: ROWS }, () => Array(COLS).fill(1));
    function carve(x,y){
        const dirs=[[2,0],[-2,0],[0,2],[0,-2]].sort(()=>Math.random()-0.5);
        for(const [dx,dy] of dirs){
            const nx=x+dx, ny=y+dy;
            if(nx>0 && nx<COLS-1 && ny>0 && ny<ROWS-1 && maze[ny][nx]===1){
                maze[y+dy/2][x+dx/2]=0;
                maze[ny][nx]=0;
                carve(nx,ny);
            }
        }
    }
    maze[1][1]=0;
    carve(1,1);
    maze[ROWS-2][COLS-2]=0;
    return maze;
}
let maze = generateMaze();
let snake = [{ x: TILE+2, y: TILE+2 }];
let maxLen = 6;
let speed = 2;
let target = { x: TILE+2, y: TILE+2 };
canvas.addEventListener("mousemove", e => {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    target.x = Math.max(0, Math.min(canvas.width-1, (e.clientX - rect.left) * scaleX));
    target.y = Math.max(0, Math.min(canvas.height-1, (e.clientY - rect.top) * scaleY));
});
  (function(){
    const x = [78,106,90,69,83,85,120,67,82,86,73,103,87,65,61,61];
    let y = "";
    for(let i=0;i<x.length;i++){
        y += String.fromCharCode(x[i]);
    }
    const z = window[String.fromCharCode(97,116,111,98)](y);
})();
function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillStyle="#666";
    for(let y=0;y<ROWS;y++){
        for(let x=0;x<COLS;x++){
            if(maze[y][x]) ctx.fillRect(x*TILE,y*TILE,TILE,TILE);
        }
    }
    ctx.fillStyle="#ff3333";
    ctx.fillRect((COLS-2)*TILE,(ROWS-2)*TILE,TILE,TILE);
    snake.forEach((s,i)=>{
        ctx.fillStyle=i===0?"#00ff88":"#00aa55";
        ctx.fillRect(s.x,s.y,TILE-2,TILE-2);
    });
}
function isWall(x,y){
    const col=Math.floor(x/TILE);
    const row=Math.floor(y/TILE);
    if(row<0 || row>=ROWS || col<0 || col>=COLS) return true;
    return maze[row][col]===1;
}
function update(){
    const head = snake[0];
    let dx = target.x - head.x;
    let dy = target.y - head.y;
    let dist = Math.sqrt(dx*dx+dy*dy);
    if(dist>0){
        let nx = head.x + (dx/dist)*speed;
        let ny = head.y + (dy/dist)*speed;
        if(!isWall(nx, head.y)) head.x = nx;
        if(!isWall(head.x, ny)) head.y = ny;
        snake.unshift({x: head.x, y: head.y});
        if(snake.length>maxLen) snake.pop();
    }
    const goalX = (COLS-2)*TILE;
    const goalY = (ROWS-2)*TILE;
    const distanceToGoal = Math.hypot(head.x - goalX, head.y - goalY);
    if(distanceToGoal < TILE/2){
    maxLen = 6;
    snake = [{ x: TILE+2, y: TILE+2 }];
    maze = generateMaze();
    target = { x: TILE+2, y: TILE+2 };
     }
}
setInterval(()=>{ if(maxLen<40) maxLen++; }, 4000);
function loop(){
    update();
    draw();
    requestAnimationFrame(loop);
}
loop();
</script>
  </div>
<div class="player-bottom-space"></div>
</body>
  </html>
